<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加接口测试</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/admin/component/ui/css/ui.css" />
    <link rel="stylesheet" href="/admin/component/vditor/index.css"/>
</head>
<style>
    .layui-table-cell {
        overflow: visible;
    }
    
    .layui-table-box {
        overflow: visible;
    }
    
    .layui-table-body {
        overflow: visible;
    }
    /* 设置下拉框的高度与表格单元相同 */
    td .layui-form-select{
        margin-top: -3px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .layui-tab-content{
        padding: 0;
    }
    /*
    .layui-tab-left li{
        display: block;
    }
    .layui-tab-left{
        float: left;
        width: 100px;
    }
    .layui-tab-left-content{
        float: left;
        width: 500px;
    }*/
</style>
<body>

    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <form class="layui-form" action="" lay-filter="testform">
                    <div class="layui-input-inline" style="width: 80px;">
                        <select name="method" class="layui-select">
                            <option value="post">POST</option>
                            <option value="get">GET</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" class="layui-input" name="test_path">
                    </div>
                    <div class="layui-input-inline">
                        <span class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="api-save">
                            <i class="layui-icon layui-icon-ok"></i>
                            发送
                        </span>
                    </div>
                </form>

            </div>
            <div class="layui-tab"  lay-filter="test_tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1">发送参数</li>
                    <li lay-id="2">Headers</li>
                    <li lay-id="3">预想</li>
                    <!--li>回写</li-->
                    <li lay-id="4">结果</li>
                    <li lay-id="5">备注</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
<!-- 参数开始-->

<script type="text/html" id="data-toolbar">
    <span class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </span>
    <span class="layui-btn layui-btn-primary layui-border-cyan layui-btn-sm" lay-event="init">
        <i class="layui-icon layui-icon-refresh-3"></i>
        初始化
    </span>
</script>
<script type="text/html" id="data-editbar">
    <span class="pear-btn pear-btn-danger pear-btn-sm"  lay-event="del">
        <i class="layui-icon layui-icon-delete"></i>
    </span>
</script>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="data-table" class="layui-table" lay-filter="data-table">
        <thead>
            <tr>
            <th lay-data="{field:'key',edit:true}">标志</th>
            <th lay-data="{field:'def',edit:true}">输入</th>
            <th lay-data="{templet: '#data-editbar'}">操作</th>
            </tr> 
        </thead>
        <tbody id="data-area"></tbody>
        </table>
    </div>
</div>
<script type="text/html" id="data-tpl">
    {{# layui.each(d, function(index, el){ }}
       <tr>
           <td>{{el.key}}</td>
           <td>{{el.def}}</td>
           <td></td>
       </tr>
    {{#  }); }}
   </script>
<!-- 参数结束-->

                    </div>
                    <div class="layui-tab-item">
<!-- header开始-->

<script type="text/html" id="head-toolbar">
    <span class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="addhead">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </span>
    <span class="layui-btn layui-btn-primary layui-border-cyan layui-btn-sm" lay-event="inithead">
        <i class="layui-icon layui-icon-refresh-3"></i>
        初始化
    </span>
</script>
<script type="text/html" id="head-editbar">
    <span class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delhead">
        <i class="layui-icon layui-icon-delete"></i>
    </span>
</script>
<div class="layui-card">
    <div class="layui-card-body">
    <form class="layui-form" action="" lay-filter="headform">
        <table id="head-table" class="layui-table" lay-filter="head-table">
        <thead>
            <tr>
            <th lay-data="{field:'key',edit:true}">标志</th>
            <th lay-data="{field:'val',edit:true}">输入</th>
            <th lay-data="{templet: '#head-editbar'}">操作</th>
            </tr> 
        </thead>
        <tbody id="head-area"></tbody>
        </table>
    
    <div class="layui-form-item">
        <label class="layui-form-label">携带cookie</label>
        <div class="layui-input-inline">
            <input type="checkbox" checked="" name="withCredentials" lay-skin="switch" lay-filter="switchCookie" lay-text="ON|OFF">
        </div>
    </div>
</form>
    </div>
</div>
<script type="text/html" id="head-tpl">
    {{# layui.each(d, function(index, el){ }}
       <tr>
           <td>{{el.key}}</td>
           <td>{{el.val}}</td>
           <td></td>
       </tr>
    {{#  }); }}
   </script>
<!-- header结束-->
                    </div>
                    <div class="layui-tab-item">
<!-- 预想开始-->
<!-- 预想top开始-->
<form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">状态Status</label>
      <div class="layui-input-inline" style="width: 200px;">
        <input type="text" name="status" id="status" value="200" lay-verify="status" autocomplete="off" placeholder="请输入status" class="layui-input">
      </div>
    
      <label class="layui-form-label">预期类型</label>
      <div class="layui-input-inline" style="width: 200px;">
        <select name="dataType" id="dataType">
            <option value="json">json</option>
            <option value="text">text</option>
            <option value="jsonp">jsonp</option>
            <option value="script">script</option>
            <option value="html">html</option>
            <option value="xml">xml</option>
        </select>
      </div>
    </div>
</form>
<!-- 预想top结束-->
<div class="layui-card">
    <div class="layui-card-body" style="padding:0 10px">
<!-- 预想结构开始-->
<script type="text/html" id="restop-toolbar">
    <span class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="addrestop">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </span>
    <span class="layui-btn layui-btn-primary layui-border-cyan layui-btn-sm" lay-event="initrestop">
        <i class="layui-icon layui-icon-refresh-3"></i>
        初始化
    </span>
</script>
<script type="text/html" id="restop-editbar">
    <span class="pear-btn pear-btn-danger pear-btn-sm"  lay-event="delrestop">
        <i class="layui-icon layui-icon-delete"></i>
    </span>
</script>

    <blockquote class="layui-elem-quote">结构</blockquote>
    <form class="layui-form" action="" lay-filter="restopform">
        <table id="restop-table" class="layui-table" lay-filter="restop-table">
        <thead>
            <tr>
            <th lay-data="{field:'key',edit:true}">标志</th>
            <th lay-data="{field:'val',edit:true}">预想值</th>
            <th lay-data="{field:'stype',width:120}">类型</th>
            <th lay-data="{field:'isdata',width:80}">数据对象</th>
            <th lay-data="{templet: '#restop-editbar'}">操作</th>
            </tr> 
        </thead>
        <tbody id="restop-area"></tbody>
        </table>
    </form>
    <script type="text/html" id="restop-tpl">
    {{# layui.each(d, function(index, el){ }}
       <tr>
           <td>{{el.key}}</td>
           <td>{{el.val}}</td>
           <td>
           <select class="layui-select top-select" name="stype" style="width:70px">
                <option value="exist"{{ el.stype === 'exist' ? ' selected' : '' }}>存在</option>
                <option value="string"{{ el.stype === 'string' ? ' selected' : '' }}>字符串</option>
                <option value="number"{{ el.stype === 'number' ? ' selected' : '' }}>数字</option>
                <option value="array"{{ el.stype === 'array' ? ' selected' : '' }}>数组</option>
                <option value="object"{{ el.stype === 'object' ? ' selected' : '' }}>对象</option>
            </select>
           </td>
           <td><input type="radio" name="dataTopField" value="{{el.key}}"{{ el.isdata === 1 ? ' checked' : '' }} title=""></td>
           <td></td>
       </tr>
    {{#  }); }}
   </script>
   <!-- 预想结构结束-->
   <!-- 预想数据开始-->
   <script type="text/html" id="resdata-dtype">
     <select class="layui-select" name="dtype">
        <option value="exist">存在</option>
        <option value="eq">等于</option>
        <option value="neq">不等于</option>
        <option value="gt">大于</option>
        <option value="lt">小于</option>
        <option value="gte">大于等于</option>
        <option value="lte">小于等于</option>
        <option value="in">包含</option>
     </select>
    </script>
    <script type="text/html" id="resdata-toolbar">
    <span class="layui-btn layui-btn-primary layui-border-red layui-btn-sm" lay-event="addresDataOne">
        <i class="layui-icon layui-icon-add-1"></i>
        单项
    </span>
    <span class="layui-btn layui-btn-primary layui-border-cyan layui-btn-sm" lay-event="addresDataDb">
        <i class="layui-icon layui-icon-add-1"></i>
        从数据库
    </span>
    <span class="layui-btn layui-btn-primary layui-border-orange layui-btn-sm" lay-event="clearResData">
        <i class="layui-icon layui-icon-delete"></i>
        清空
    </span>
</script>
<script type="text/html" id="resdata-editbar">
    <span class="pear-btn pear-btn-primary pear-btn-sm"  lay-event="deepresdata">
        <i class="layui-icon layui-icon-at"></i>深度
    </span>
    <span class="pear-btn pear-btn-danger pear-btn-sm"  lay-event="delresdata">
        <i class="layui-icon layui-icon-delete"></i>删除
    </span>
</script>
<script type="text/html" id="deeptpl">
   <div id="deep-{{d.key}}">
    <blockquote class="layui-elem-quote" style='margin-top:15px'>数据{{d.key}}</blockquote>
    <table id="deeptable_{{d.key}}" class="layui-table" lay-filter="deeptable_{{d.key}}">
        <thead>
            <tr>
            <th lay-data="{field:'key',edit:true}">标志</th>
            <th lay-data="{templet: '#resdata-dtype',width:120}">判断</th>
            <th lay-data="{field:'val',edit:true}">预想值</th>
            <th lay-data="{templet: '#resdata-editbar'}">操作</th>
            </tr> 
        </thead>
        <tbody></tbody>
    </table>
    </div>
</script>
    <!-- 预想数据结束-->
    <!-- 预想数据深度开始-->
    <div id="dp-area"></div>
    <!-- 预想数据深度结束-->
    </div>
</div>
<!-- 预想结束-->
                    </div>
                   <!-- <div class="layui-tab-item">-->
<!-- 回写开始-->
<!-- 回写结束-->
                    <!--</div>-->
                    <div class="layui-tab-item">
<!-- 结果开始-->
<blockquote class="layui-elem-quote">状态码：<span id="resCode"></span></blockquote>
  <div class="layui-form-text">
    <textarea name="resResult" id="resResult" placeholder="结果" class="layui-textarea" style="height:300px"></textarea>
  </div>
<!-- 结果结束-->
                    </div>
                    <div class="layui-tab-item">
<!-- 保存开始-->
<div id="veditor"></div>
<!-- 保存结束-->
                    </div>
                </div>
            </div>


        </div>
    </div>

<!--数据库-->
<div class="layui-tab layui-tab-card" id="tabs-area" style="display:none"></div>
 <script id="tabs-tpl" type="text/html">
        
        <ul class="layui-tab-title">
        {{#  layui.each(d, function(index, item){ }}
            <li {{#  if(index == 0){ }}class="layui-this"{{#  }; }}>{{ item.comment ? item.comment : item.name  }}</li>
        {{#  }); }}
        </ul>
        
        <div class="layui-tab-content" style="height: 100px;" id="tabs-content">
        {{#  layui.each(d, function(index, item){ }}
        
        <div class="layui-tab-item{{#  if(index == 0){ }} layui-show{{#  }; }}">
        <form class="layui-form" action="" lay-filter="dataformlist">
            <table id="{{ item.name }}-table" class="layui-table" lay-filter="{{ item.name }}-table">
                  <colgroup>
                    <col>
                    <col>
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                    <tr style="text-align:center">
                    <th>字段名</th>
                    <th>中文名</th>
                    <th>类型</th>
                    <th>为空</th>
                    <th>默认值</th>
                    <th><input type="checkbox" name="chkall" class="chkall" lay-skin="primary"></th>
                    </tr> 
                </thead>
                <tbody>
                    {{# layui.each(item.child, function(idx, el){ }}
                    <tr>
                        <td>{{el.name}}</td>
                        <td>
                            {{el.title}}
                        </td>
                        <td>
                            {{el.type}}
                        </td>
                        <td>
                            {{el.isnull}}
                        </td>
                        <td>
                            {{el.def}}
                        </td>
                        <td>
                            <input type="checkbox" name="isck" value="{{item.name}}.{{el.name}}"  lay-skin="primary" {{ el.hasck ? 'checked disabled' : '' }} class="isck"/>
                        </td>
                    </tr>
                    {{#  }); }}
                </tbody>
            </table>
            </form>
        </div>
        
        {{#  }); }}
        </div>
        
        <div class="bottom">
                <div class="button-container">
                    <span class="layui-elem-quote">根据模型取表，如需多表可在模型中新增附加表</span>
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" id="saveDbFieldsBtn">
                        <i class="layui-icon layui-icon-ok"></i>
                    提交
                    </button>
                </div>
        </div>
        </script>
<!--数据库结束-->
<div class="bottom">
    <div class="button-container">
        <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required|len" autocomplete="off" id="name"
                placeholder="用例名称" class="layui-input">
        </div>
        <span type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="saveData">
            <i class="layui-icon layui-icon-ok"></i>
        保存
        </span>
    </div>
</div>
    <script src="../../config/config.js"></script>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/ui/ui.js"></script>
    <script src="../../component/vditor/index.min.js"></script>
    <script src="./testadd.js"></script>

</body>

</html>